<template>
	<view class="page">
		<image class="image" :lazy-load="true" :src="detailData.image" mode="widthFix" />

		<view class="title bg-fff">{{ detailData.title }}</view>

		<view class="timeWrap bg-fff top-10 flex">
			<up-icon name="clock" color="#F76464" size="16"></up-icon>

			<view class="time left-10">
				{{ detailData.startTime }} - {{ detailData.endTime }}
			</view>
		</view>

		<view class="contentWrap bg-fff top-10">
			<view class="contentTitle fontBold font15">活动说明</view>
			<view class="top-10 font13">{{ detailData.content }}</view>

			<view class="signBtn text-center col-fff top-25" :class="{'bg-error': detailData.signStatus === 0, 'bg-theme': detailData.signStatus === 1, 'bg-error-opacity': detailData.signStatus === 2}" @click.stop="handleSign">
				{{ detailData.signStatus === 0 ? '报名' : detailData.signStatus === 1 ? '已报名' : '活动已结束' }}
			</view>
		</view>

		<up-modal :show="showModel" :showCloseBtn="false" :closeOnClickOverlay="true" @close="showModel = false" @confirm="handleSignConfirm">
			<view class="signModal width-100">
				<view class="font15 bottom-3">姓名</view>
				<view>
					<up-input v-model="nameValue" placeholder="请输入姓名" />
				</view>

				<view class="font15 top-10 bottom-3">手机号</view>
				<view>
					<up-input v-model="phoneValue" placeholder="请输入手机号" />
				</view>
			</view>
		</up-modal>

		<up-gap height="40"></up-gap>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';

let detailData = ref({
	id: '',
	image: 'https://image.srea.org.cn/xcx/home-banner-img.png',
	title: '标题栏内容保持不变',
	startTime: '2020-20-20',
	endTime: '2020-20-20',
	signStatus: 0,
	content: '活动说明活动说明活动说明活动说明活动说明活动说明活动说明活动说明活动说明活动说明活动说明活动说明'
});

let activeIdValue = ref('');
let nameValue = ref('');
let phoneValue = ref('');
let showModel = ref(false);

// 页面加载
onLoad((options) => {
	let { activeId } = options;
	activeIdValue.value = activeId;
	uni.setNavigationBarTitle({
		title: '活动详情'
	});
	uni.$check_and_login()
})

// 分享到好友
onShareAppMessage(() => {
	return {
		title: '活动详情',
		path: `/pages/products/active/detail?activeId=${detailData.value.id}`,
	}
})

// 分享到朋友圈
onShareTimeline(() => {
	return {
		title: '活动详情',
		query: `activeId=${detailData.value.id}`,
	}
})

// 报名
function handleSign(){
	if(detailData.value.signStatus === 0){
		showModel.value = true;
	}
}

// 报名确认
function handleSignConfirm(){
	if(nameValue.value === '' || phoneValue.value === ''){
		uni.showToast({
			title: '请填写完整信息',
			icon: 'none'
		})
		return;
	}
	showModel.value = false;
}
</script>

<style lang="scss" scoped>
.page{
	.image{
		width: 100%;
	}
	.title{
		padding: 30rpx 22rpx;
	}
	.timeWrap{
		padding: 30rpx 22rpx;
		justify-content: flex-start;
	}
	.contentWrap{
		padding: 30rpx 22rpx;
		.signBtn{
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 10rpx;
		}
	}
}
</style>
